<template>
  <div>
    <main-nav :index="4"></main-nav>
    <i-form class="container" :model="model" style="margin-top:40px" @submit.native.prevent="onSubmit()" :rules="rules" ref="new-post-form">
      <i-row :gutter="20">
        <i-col :md="4" :sm="6">
          <i-form-item class="no-label" prop="grade">
            <grades :value.sync="model.grade" :editable="!model.courseId"></grades>
          </i-form-item>
        </i-col>
        <i-col :md="4" :sm="6">
          <i-form-item class="no-label" prop="subject">
            <subjects :value.sync="model.subject" :editable="!model.courseId"></subjects>
          </i-form-item>
        </i-col>
        <i-col :md="16" :sm="12" v-if="courseName">
          <i-form-item class="no-label">
            <router-link :to="{name: 'course-detail', params: {id: model.courseId}}">课程：{{courseName}}</router-link>
          </i-form-item>
        </i-col>
      </i-row>
      <i-form-item prop="title">
        <i-input v-model="model.title" placeholder="标题：一句话说清楚，问题以问号结尾"></i-input>
      </i-form-item>
      <i-form-item prop="tags">
        <tag-selector label="知识点" :values.sync="model.tags" :subject="model.subject" :grade="model.grade"></tag-selector>
      </i-form-item>
      <q-editor :html.sync="model.content"></q-editor>
      <i-form-item prop="content">
        <input type="hidden" v-model="model.content" />
      </i-form-item>
      <i-form-item class="margin-top-20">
        <uploader :type="0" :files.sync="model.files" text="上传文档" ref="uploader"></uploader>
      </i-form-item>
      <i-form-item>
        <i-button html-type="submit" type="primary" style="padding: 8px 35px;">发布</i-button>
      </i-form-item>
    </i-form>
  </div>
</template>

<script>
import MainNav from '../components/main-nav'
import QEditor from '../components/editor'
import Grades from '../components/filters/Grades'
import Subjects from '../components/filters/Subjects'
import TagSelector from '../components/tag-selector'
import Uploader from '../components/uploader'
import { mapActions } from 'vuex'
export default {
  components: {
    MainNav,
    QEditor,
    TagSelector,
    Grades,
    Uploader,
    Subjects
  },
  data() {
    return {
      courseName: '',
      model: {
        grade: 1,
        subject: 1,
        title: null,
        content: '',
        tags: [],
        files: [],
        courseId: null
      },
      rules: {
        title: {
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        },
        content: {
          required: true,
          message: '请输入内容',
          trigger: 'blur'
        },
        grade: {
          required: true,
          type: 'number',
          message: '请选择年级',
          trigger: 'blur'
        },
        subject: {
          required: true,
          type: 'number',
          message: '请选择科目',
          trigger: 'blur'
        },
        tags: {
          type: 'array',
          required: true,
          message: '请输入相关知识点'
        }
      }
    }
  },
  methods: {
    ...mapActions({
      savePost: 'savePost',
      getLesson: 'getLesson',
      getLoggedInfo: 'getLoggedInfo'
    }),
    onSubmit() {
      let that = this
      that.$refs['new-post-form'].validate(valid => {
        if (valid) {
          that.savePost({
            form: that.model,
            callback(id) {
              that.$router.push({
                name: 'question-detail',
                params: { id: id }
              })
            }
          })
        }
      })
    }
  },
  mounted() {
    this.getLoggedInfo()
  },
  activated() {
    var query = this.$route.query
    var courseId = query && query.courseId
    const that = this
    if (courseId) {
      this.getLesson({
        id: courseId,
        callback(data) {
          that.model.courseId = courseId
          that.courseName = data.title
        }
      })
    }
  }
}
</script>

<style>
</style>
